<template>
  <div class="multi-select">
    <!-- 选择全部框 -->
    <span
      class="s-checkbox-box"
      :class="{
            'is-checked':  allchecked
        }"
      @click.stop="allInputChange"
    >
      <span class="s-checkbox__inner"></span>
      <input type="checkbox" id="s-checkbox" class="s-checkbox" />
      <label class="s-label" style>全部</label>
    </span>
    <!-- 部分选择框 -->
    <span
      class="s-checkbox-box"
      v-for="(item,index) in allTags"
      :class="{
            'is-disabled': item.disabled,
            'is-checked':  model[index]
        }"
      @click.stop="chooseSCheckbox(item,index)"
      :key="index"
    >
      <!-- 选择框图标 -->
      <span class="s-checkbox__inner"></span>
      <input type="checkbox" v-model="model[index]" id="s-checkbox" class="s-checkbox" />
      <label class="s-label" style>{{item.text}}</label>
    </span>
  </div>
</template>

<script>
export default {
  name: "sCheckboxGroup",
  data() {
    return {
      model: [],
      allchecked: false
    };
  },
  props: {
    allTags: {
      type: Array,
      default: () => {
        return [];
      }
    },
    disabled: Boolean,
    // 默认选中
    value: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  watch: {},
  // 获取默认选中的多选框
  created() {
    console.log(this.value);

    for (let i in this.allTags) {
      this.model[i] = false;
      for (let n in this.value) {
        if (this.value[n] == this.allTags[i].value) {
          this.model[i] = true;
        }
      }
    }
  },
  methods: {
    // 全选按钮
    allInputChange() {
      this.allchecked = !this.allchecked;
      if (this.allchecked === true) {
        this.model = [];
        for (let i = 0; i < this.allTags.length; i++) {
          this.model.push(true);
        }
        let newArr = [];
        for (let item = 0; item < this.allTags.length; item++) {
          newArr.push(this.allTags[item].value);
        }
        this.$emit("onChange", newArr);
      }
      if (this.allchecked === false) {
        this.model = [];
        for (let i = 0; i < this.allTags.length; i++) {
          this.model.push(false);
        }
        let newArr = [];
        this.$emit("onChange", newArr);
      }
    },
    // 部分选中按钮
    chooseSCheckbox(val, index) {
      //   model是一个用来存储选择框是否选中的数组，没有选中里边的值就是false
      this.model[index] = !this.model[index];
      this.model.push(false);
      console.log(this.model);
      // 返回value值
      let arr = this.model.slice(0, this.allTags.length);
      let newArr = [];
      //   把已经选中了的值传递出去
      for (let i in this.allTags) {
        if (arr[i]) {
          newArr.push(this.allTags[i].value);
        }
      }
      if (newArr.length === this.allTags.length) {
        this.allchecked = true;
      }
      if (newArr.length < this.allTags.length) {
        this.allchecked = false;
      }
      this.$emit("onChange", newArr);
      this.$emit("input", newArr);
    }
  }
};
</script>

<style scoped>
/* 复选框图标容器 */
.s-checkbox__inner {
  border: 1px solid #dcdfe6;
  width: 25px;
  height: 30px;
  background-color: #fff;
  position: relative;
  cursor: pointer;
  display: inline-block;
  box-sizing: border-box;
  top: 32px;
  right: -78px;
  visibility: hidden;
}
/* 勾选后的小勾图标 */
.s-checkbox__inner:after {
  box-sizing: content-box;
  content: "";
  border: 1px solid #fff;
  border-left: 0;
  border-top: 0;
  height: 7px;
  left: 0px;
  position: absolute;
  top: 10px;
  transform: rotate(0deg) scaleY(1);
  width: 3px;
  transition: transform 0.15s ease-in 0.05s;
  transform-origin: center;
}
/* 对于每一个选择框的容器 */
.s-checkbox-box {
  cursor: pointer;
  display: inline-block;
  border: 1px solid #f5f5f5;
  margin: 10px;
  height: 50px;
  width: 90px;
  border-radius: 5px;
  background-color: #f5f5f5;
  overflow: hidden;
  box-sizing: border-box;
}
.s-checkbox-box.is-checked {
  border: 1px solid #e15f41;
}
/* 选择后的图标框样式 */
.s-checkbox-box.is-checked .s-checkbox__inner {
  border-color: #e15f41;
  background: #e15f41;
  transform: rotate(45deg);
  visibility: visible;
  position: relative;
}
/* 勾选后的选择框label样式 */
.s-checkbox-box.is-checked .s-label {
  color: #e15f41;
  visibility: visible;
}
.s-label {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(-100%);
  color: #606266;
}
/* 复选框 */
.s-checkbox {
  outline: none;
  position: absolute;
  z-index: -1;
  top: 27px;
  left: 68px;
  right: 0;
  bottom: 0;
  margin: 0;
}
.s-checkbox-box {
  position: relative;
  cursor: pointer;
}
.multi-select {
  /* display: inline-block; */
  margin: 10px 0;
}
</style>

